<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%">
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-position="left"
      label-width="150px"
      :disabled="viewMode === 'view'"
    >
      <el-form-item label="员工姓名" prop="work_staff_name">
        <el-input
          v-model="formData.work_staff_name"
          placeholder="请输入员工姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="员工编号" prop="work_staff_code">
        <el-input
          v-model="formData.work_staff_code"
          placeholder="请输入员工编号"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="formData.sex">
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" prop="birth_date">
        <el-date-picker
          v-model="formData.birth_date"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择出生日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="身份证号" prop="identity_card">
        <el-input
          v-model="formData.identity_card"
          placeholder="请输入身份证号"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input
          v-model="formData.phone"
          placeholder="请输入手机号码"
        ></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input
          v-model="formData.email"
          placeholder="请输入电子邮箱"
        ></el-input>
      </el-form-item>

      <el-form-item label="职级" prop="work_rank">
        <el-input
          v-model="formData.work_rank"
          placeholder="请输入职级"
        ></el-input>
      </el-form-item>
      <!-- 岗位 -->
      <el-form-item label="岗位" prop="job_position_ids">
        <el-cascader
          v-model="formData.job_position_ids"
          :options="jobPositionOptions"
          :props="{ multiple: true, checkStrictly: true }"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="入职日期" prop="entry_date">
        <el-date-picker
          v-model="formData.entry_date"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择入职日期"
        ></el-date-picker>
      </el-form-item>
      <!-- 合同状态，字典值 -->
      <el-form-item label="合同状态" prop="contract_status">
        <el-input
          v-model="formData.contract_status"
          placeholder="请输入合同状态"
        ></el-input>
      </el-form-item>
      <!-- 工作制度 -->
      <el-form-item label="工作制度" prop="work_system">
        <el-input
          v-model="formData.work_system"
          placeholder="请输入工作制度"
        ></el-input>
      </el-form-item>
      <!-- 员工状态，字典值 -->
      <el-form-item label="员工状态" prop="employee_status">
        <el-input
          v-model="formData.employee_status"
          placeholder="请输入员工状态"
        ></el-input>
      </el-form-item>
      <!-- 系统账号 -->
      <el-form-item label="系统账号" prop="system_account">
        <el-input
          v-model="formData.system_account"
          placeholder="请输入系统账号"
        ></el-input>
      </el-form-item>
      <!-- 账号创建时间 -->
      <el-form-item label="账号创建时间" prop="account_created_time">
        <el-date-picker
          v-model="formData.account_created_time"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择账号创建时间"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button type="primary" v-if="viewMode !== 'view'" @click="submitForm">
        提交
      </el-button>
      <el-button @click="closeDialog">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script>
import EmployeeService from "@/api/employee";
import JobPositionService from "@/api/job-position";
export default {
  name: "MyDialog",
  data() {
    return {
      viewMode: "",
      dialogVisible: true, // 初始时对话框可见
      dialogTitle: "添加员工", // 对话框标题
      jobPositionOptions: [],
      // 表单数据
      formData: {
        work_staff_name: "",
        work_staff_code: "",
        sex: "",
        birth_date: "",
        identity_card: "",
        phone: "",
        email: "",
        work_rank: "",
        entry_date: "",
        contract_status: "",
        job_position_ids: [],
        work_system: "",
        employee_status: "",
        system_account: "",
        account_created_time: "",
      },
      // 校验规则
      rules: {
        // work_staff_name: [
        //   { required: true, message: "请输入员工姓名", trigger: "blur" },
        // ],
        // work_staff_code: [
        //   { required: true, message: "请输入员工编号", trigger: "blur" },
        // ],
        // sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        // birth_date: [
        //   { required: true, message: "请选择出生日期", trigger: "change" },
        // ],
        // identity_card: [
        //   { required: true, message: "请输入身份证号", trigger: "blur" },
        // ],
        // phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        // email: [{ required: true, message: "请输入电子邮箱", trigger: "blur" }],
        // work_rank: [{ required: true, message: "请输入职级", trigger: "blur" }],
        // entry_date: [
        //   { required: true, message: "请选择入职日期", trigger: "change" },
        // ],
        // contract_status: [
        //   { required: true, message: "请输入合同状态", trigger: "blur" },
        // ],
        // work_system: [
        //   { required: true, message: "请输入工作制度", trigger: "blur" },
        // ],
        // employee_status: [
        //   { required: true, message: "请输入员工状态", trigger: "blur" },
        // ],
        // system_account: [
        //   { required: true, message: "请输入系统账号", trigger: "blur" },
        // ],
        // account_created_time: [
        //   { required: true, message: "请选择账号创建时间", trigger: "change" },
        // ],
      },
    };
  },
  methods: {
    // 初始化添加根岗位
    initAddEmployee() {
      console.log("initAddEmployee");
      this.viewMode = "add";
      this.dialogTitle = "添加员工";
    },
    // 初始化查看员工
    initViewEmployee(row) {
      this.viewMode = "view";
      this.dialogTitle = "查看员工";
      this.formData = {
        ...row,
      };
    },
    // 初始化修改员工
    initModifyEmployee(row) {
      console.log("initModifyEmployee", row);
      this.viewMode = "modify";
      this.dialogTitle = "编辑员工";
      this.formData = {
        ...row,
      };
    },
    /**
     * 获取岗位树
     */
    getJobPositionTree() {
      JobPositionService.getJobPositionTree().then(async (res) => {
        let data = await res.json();
        if (data.code === 200) {
          this.jobPositionOptions = data.result;
        }
      });
    },
    // 提交表单
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交表单数据
          console.log(this.formData);
          if (this.viewMode === "add") {
            this.submitForAdd();
          } else if (this.viewMode === "modify") {
            this.submitForModify();
          }
        } else {
          console.log("校验失败");
        }
      });
    },
    /**
     * 添加根分类和子分类
     */
    submitForAdd() {
      EmployeeService.createEmployee(this.formData).then(async (res) => {
        let data = await res.json();
        if (data.code === 200) {
          this.$notify.success({
            title: "操作成功",
            message: "添加成功",
          });
          this.onCloseAndRefresh();
        } else {
          this.$notify.error({
            title: "操作失败",
            message: data.message,
          });
        }
      });
    },
    /**
     * @description 提交修改
     */
    submitForModify() {
      EmployeeService.updateEmployee(this.formData).then(async (res) => {
        let data = await res.json();
        if (data.code === 200) {
          this.$notify.success({
            title: "操作成功",
            message: "编辑成功",
          });
          this.onCloseAndRefresh();
        } else {
          this.$notify.error({
            title: "操作失败",
            message: data.message,
          });
        }
      });
    },
    // 关闭对话框并刷新数据
    onCloseAndRefresh() {
      this.$emit("close", true);
    },
    // 关闭对话框
    closeDialog() {
      this.$emit("close", false);
    },
  },
};
</script>
